﻿// JScript 文件
////////////////////////////////////////svg 基本绘图接口////////////////////////////////////
//举例
/*arg = {
                    SVGEmbed:"SVGEmbed", 
                    id:"svgLayer01", 
                    strokeweight: "3px", 
                    strokecolor: "red", 
                    OnMouseOver: changeColor01,
                    onmouseClick: null,
                    OnMouseDown : null,
                    OnMouseUp:null,
                    OnMouseOut:null,
                    dotArr: null
                } 
          var drawObj = new CtnApSvg(arg);
          
          arg = {
                    id:"Cir01", 
                    x:60,
                    y:60,
                    r:30,
                    strokeweight: "3px", 
                    strokecolor: "yellow", 
                    OnMouseOver: null,
                    OnMouseOut:  changeColor02
                } 
          drawObj.drawCircle(arg)
          
           arg = {
                    id:"Rec01", 
                    x:60,
                    y:60,
                    w:30,
                    h:30,
                    strokeweight: "3px", 
                    strokecolor: "yellow", 
                    OnMouseOver: null,
                    OnMouseOut:  changeColor02
                } 
          drawObj.drawRect(arg)
          
          arg = {
                    id:"Tex01", 
                    x:280,
                    y:100,
                    text:"how are you",
                    link:"Login.aspx"
                } 
          drawObj.drawText(arg)
          var arr = new Array()
          arr.push(new D_Dot2D(340,340))
          arr.push(new D_Dot2D(440,380))
          arg = {
                    id:"line01", 
                    strokeweight: "2px", 
                    dotArr:arr
                } 
          drawObj.drawLine(arg)
          arr.pop();arr.pop();
          arr.push(new D_Dot2D(240,300))
          arr.push(new D_Dot2D(540,380))
          arr.push(new D_Dot2D(240,480))
          
           arg = {
                    id:"shape01", 
                    strokeweight: "2px", 
                    fill: "white",
                    dotArr:arr
                } 
          drawObj.drawShape(arg)
*/
//////////////////////////////////////////////////////////////////////////////////////////////
//svg 基本绘图接口
     
     CtnSvgBase = function() {};
     CtnSvgBase.prototype = {
        setOptions: function(options)
        {
            this.options = options;
            
            this.SVGEmbed     = this.options.SVGEmbed         ? this.options.SVGEmbed : "SVGEmbed";
            this.id           = this.options.id               ? this.options.id : "";
            this.zIndex       = this.options.zIndex           ? this.options.zIndex : -1;
            this.left         = this.options.left             ? parseInt(this.options.left) : 0;
            this.top          = this.options.top              ? parseInt(this.options.top) : 0;
            this.strokeweight = this.options.strokeweight     ? this.options.strokeweight : "1px";
            this.stroked      = this.options.stroked          ? this.options.stroked : false;
            this.strokecolor  = this.options.strokecolor      ? this.options.strokecolor : "black";
            this.bhidden      = this.options.bhidden          ? this.options.bhidden : false;                 //当前图层是否显示
            
            this.opacity      = this.options.opacity          ? this.options.opacity : "0.7";
            this.fill         = this.options.fill             ? this.options.fill : "white";
            this.dotArr       = this.options.dotArr           ? this.options.dotArr : new Array();
            this.OnMouseOver  = this.options.OnMouseOver      ? this.options.OnMouseOver : null;
            this.OnMouseClick = this.options.OnMouseClick     ? this.options.OnMouseClick : null;
            this.OnMouseDown  = this.options.OnMouseDown      ? this.options.OnMouseDown : null;
            this.OnMouseUp    = this.options.OnMouseUp        ? this.options.OnMouseUp : null;
            this.OnMouseOut   = this.options.OnMouseOut       ? this.options.OnMouseOut : null;
            this.OnMouseClick = this.options.OnMouseClick     ? this.options.OnMouseClick : null;
            
            this.bFF          = (CtnBrowser.FF)               ? true:false;                                  //使用svg绘图控制开关
       },   
       
       creatLayer: function()
       {
            if(this.bFF)
            {
                this.svgDoc = window.document.getElementById(this.SVGEmbed).getSVGDocument();
                if(!this.svgDoc){alert("请加载embedControlOuterHTML.js"); return;}
                this.DrawPen = this.svgDoc.createElementNS("http://www.w3.org/2000/svg","g");
                this.DrawPen.id = this.id;
              
                var cssText = "fill-opacity:"+this.opacity+";stroke-width:"+this.strokeweight+";";
                this.DrawPen.setAttribute("style", cssText);
                this.svgDoc.documentElement.insertBefore(this.DrawPen,this.svgDoc.documentElement.firstChild);
            }
            else
            {
                this.DrawPen = $(this.id);
                if(!this.DrawPen)
                {
                    this.DrawPen = document.createElement("div");
        
                    this.DrawPen.style.position = "absolute"
                    this.DrawPen.style.visibility = this.bhidden ? "hidden" : "visible";
                   
                    this.DrawPen.style.left = "0px"
	                this.DrawPen.style.top = "0px"
	                this.DrawPen.style.zIndex = this.zIndex;
                    this.DrawPen.id = this.id;
                    document.getElementsByTagName('BODY')[0].appendChild(this.DrawPen)
                }
            }
       }
      
       , 
       draw:function()
       {
       
       },
       
       clear:function()     //清空图层中所有元素

       {
           if(this.bFF)
           {
               for(var i = this.DrawPen.childNodes.length - 1; i >= 0; i--)
               {
                   var tmp  = this.DrawPen.childNodes.item(i)
                   if(tmp.hasAttributes && tmp.nodeName != "script")
                   {
                       this.DrawPen.removeChild(tmp)
                   }
               }
           }
           else
           {
               for(var i = this.DrawPen.childNodes.length - 1; i >= 0; i--)
               {
                  this.DrawPen.removeChild(this.DrawPen.childNodes[i]);
               }
               this.DrawPen.innerHTML = "";
           }
       }
       ,
       Undraw: function(id)  //清空图层中某一元素
       {
           var delobj = (this.bFF)? this.svgDoc.getElementById(id) : $(id);
         
           if(delobj)
           {
               this.DrawPen.removeChild(delobj)
           }
       }
       ,
       $: function(id)   //重载$
       {
            if(this.bFF)    
            {
               obj = this.svgDoc.getElementById(id);
            }
            else
            {
               obj = $(id);
            }
            return obj;
       }
       ,
       getObjAtt:  getObjAtt_SVG      //取对象的属性信息
       ,
        
       moveObj :   moveObj_SVG 
       ,
       ZoomIn : function(ZoomNum) //放大图形   ZoomNum放大倍数
       {
            if(this.bFF)
            {
               for(var i = this.DrawPen.childNodes.length - 1; i >= 0; i--)
               {
                  var obj = this.DrawPen.childNodes[i];
                  
                  switch(obj.tagName)
                  {
                      case "circle":
                           obj.setAttribute("cx", parseInt(getObjAtt(obj,"cx"))*ZoomNum + "px");
                           obj.setAttribute("cy", parseInt(getObjAtt(obj,"cy"))*ZoomNum + "px");
                           obj.setAttribute("r",  parseInt(getObjAtt(obj,"r"))*ZoomNum + "px");
                           break;
                      case "rect":
                           obj.setAttribute("x", parseInt(getObjAtt(obj,"x"))*ZoomNum + "px");
                           obj.setAttribute("y", parseInt(getObjAtt(obj,"y"))*ZoomNum + "px");
                           obj.setAttribute("width",  parseInt(getObjAtt(obj,"width"))*ZoomNum + "px");
                           obj.setAttribute("height",  parseInt(getObjAtt(obj,"height"))*ZoomNum + "px");
                         break;
                      case "line":
                           obj.setAttribute("x1", parseInt(getObjAtt(obj,"x1"))*ZoomNum + "px");
                           obj.setAttribute("y1", parseInt(getObjAtt(obj,"y1"))*ZoomNum + "px");
                           obj.setAttribute("x2",  parseInt(getObjAtt(obj,"x2"))*ZoomNum + "px");
                           obj.setAttribute("y2",  parseInt(getObjAtt(obj,"y2"))*ZoomNum + "px");
                         break;
                      case "text":
                           obj.setAttribute("x", parseInt(getObjAtt(obj,"x"))*ZoomNum + "px");
                           obj.setAttribute("y", parseInt(getObjAtt(obj,"y"))*ZoomNum + "px");
                         break;    
                  
                  
                  }
               }
            }
            else
            {
               for(var i = this.DrawPen.childNodes.length - 1; i >= 0; i--)
               {
                  var obj = this.DrawPen.childNodes[i];
                  obj.style.left = parseInt(obj.style.left) * ZoomNum + "px";
                  obj.style.top = parseInt(obj.style.top) * ZoomNum + "px";
                  
                  switch(obj.tagName)
                  {
                      case "oval":
                      case "rect":
                         obj.style.width = parseInt(obj.style.width) * ZoomNum + "px";
                         obj.style.height = parseInt(obj.style.height) * ZoomNum + "px";
                         break;
                      case "line":
                          var splits = obj.to.split(',');
                          
                          obj.to = parseInt(splits[0]) * ZoomNum + "px," + parseInt(splits[1]) * ZoomNum + "px";
                         break;
                      case "shape":
                      
                         break;    
                  
                  
                  }
               }
            }
       }
                        
    }                       
     
     
     var CtnApSvg = Class.create();
     
     CtnApSvg.prototype = Object.extend(new CtnSvgBase(), 
     {
          initialize: function() 
          {
             var tmp = $A(arguments)
             var options = tmp.shift()
             this.setOptions(options);
             
             this.creatLayer();
          }
          ,
          drawCircle: drawCircle_SVG
          ,
          drawRect:   drawRect_SVG
          ,
          drawImage:  drawImage_SVG
          ,
          drawLine:   drawLine_SVG
          ,
          drawShape:  drawShape_SVG
          ,
          drawText:   drawText_SVG
        
          ,
          getObjById: getObjById_SVG
         
     }
     );
     
     
          //cicle
          function drawCircle_SVG()
          {
              var tmp = $A(arguments)
              var options = tmp.shift()
              var attop;
              if(tmp.length > 0)
              {
                  attop = tmp.shift()
              }
              
              var vId     = options.id               ? options.id : "Cir";
              var vzIndex = options.zIndex           ? options.zIndex : this.zIndex;
              var vX      = options.x                ? options.x : this.left;      //圆心坐标
              var vY      = options.y                ? options.y : this.top;
              var vR      = options.r                ? options.r : 20;
              var vFill   = options.fill             ? options.fill : this.fill;
              var vStK    = options.strokecolor      ? options.strokecolor : this.strokecolor;
              var vStKW   = options.strokeweight     ? options.strokeweight : this.strokeweight;
              
              var att         = (attop && attop.att) ? attop.att : null;
              
              var vMouseDown = options.OnMouseDown   ? options.OnMouseDown  : this.OnMouseDown;
              var vMouseUp = options.OnMouseUp       ? options.OnMouseUp    : this.OnMouseUp;
              var vMouseOver = options.OnMouseOver   ? options.OnMouseOver  : this.OnMouseOver;
              var vMouseOut = options.OnMouseOut     ? options.OnMouseOut   : this.OnMouseOut;
              var vMouseClick = options.OnMouseClick ? options.OnMouseClick : this.OnMouseClick;
              
              var shape;
              if(this.bFF)
              {
              
                  shape=this.svgDoc.createElementNS("http://www.w3.org/2000/svg","circle");
                  var cssText = "fill: " + vFill +";stroke:"+vStK+";stroke-width:"+vStKW+";";
                  
                  shape.id = vId;
                  shape.setAttribute("cx", vX);
                  shape.setAttribute("cy", vY);
                  shape.setAttribute("r",  vR);
                  shape.setAttribute("style", cssText);
                  
                  //绑定事件
                  if(vMouseDown)  {shape.addEventListener("mousedown",function (evt){vMouseDown.fun(evt,vMouseDown.param)},false);}
                  if(vMouseUp)    {shape.addEventListener("mouseup",function (evt){vMouseUp.fun(evt,vMouseUp.param)},false);}
                  if(vMouseOver)  {shape.addEventListener("mouseover",function (evt){vMouseOver.fun(evt,vMouseOver.param)},false);}
                  if(vMouseOut)   {shape.addEventListener("mouseout",function (evt){vMouseOut.fun(evt,vMouseOut.param)},false);}
                  if(vMouseClick) {shape.addEventListener("click",function (evt){vMouseClick.fun(evt,vMouseClick.param)},false);}
              }
              else
              {
                    shape = document.createElement("v:oval");
                    shape.id  = vId;
                    shape.style.position   = "absolute";
                  
                    shape.fillcolor        = vFill;
                    shape.strokecolor      = vStK;
                    shape.strokeweight     = vStKW;
                    shape.style.zIndex     = vzIndex;
                    
                    shape.style.left       = parseInt(vX) - parseInt(vR) + "px";
                    shape.style.top        = parseInt(vY) - parseInt(vR) + "px";
                    shape.style.width      = parseInt(vR) * 2 + "px";
                    shape.style.height     = parseInt(vR) * 2 + "px";
                    //shape.style.visibility = "visible";
                    
                    if(vMouseDown)  {shape.onmousedown = function (evt){vMouseDown.fun(evt,vMouseDown.param)};}
                    if(vMouseUp)    {shape.onmouseup   = function (evt){vMouseUp.fun(evt,vMouseUp.param)};}
                    if(vMouseOver)  {shape.onmouseover = function (evt){vMouseOver.fun(evt,vMouseOver.param)};}
                    if(vMouseOut)   {shape.onmouseout  = function (evt){vMouseOut.fun(evt,vMouseOut.param)};}
                    if(vMouseClick) {shape.onclick     = function (evt){vMouseClick.fun(evt,vMouseClick.param)};}
              }
              if(att)//用户自定义属性
              {
                   for(var i = 0; i < att.length; i++)
                   {
                        shape.setAttribute(att[i].name, att[i].val);
                   }
              }
              this.DrawPen.appendChild(shape)
          }
     
          //rect
          
          
          function drawRect_SVG()
          {
              var tmp = $A(arguments)
              var options     = tmp.shift()
              var attop;                        //设置对象的属性信息  name:属性名称   val：属性值
              if(tmp.length > 0)
              {
                  attop = tmp.shift()
              }
              var vId         = options.id ?           options.id : "Rec";
              var vzIndex     = options.zIndex?        options.zIndex : this.zIndex;
              var vX          = options.x  ?           options.x : this.left;
              var vY          = options.y  ?           options.y : this.top;
              var vW          = options.w  ?           options.w : 20;
              var vH          = options.h  ?           options.h : 20;
              var vFill       = options.fill ?         options.fill : this.fill;
              var vStKed      = options.stroked?       options.stroked: this.stroked; 
              var vStK        = options.strokecolor ?  options.strokecolor : this.strokecolor;
              var vStKW       = options.strokeweight ? options.strokeweight : this.strokeweight;
              var vBackDepth  = options.backdepth ?    options.backdepth  : 0;
              var att         = (attop && attop.att) ? attop.att : null;
              
              
              var vMouseDown  = options.OnMouseDown ? options.OnMouseDown : this.OnMouseDown;
              var vMouseUp    = options.OnMouseUp ? options.OnMouseUp : this.OnMouseUp;
              var vMouseOver  = options.OnMouseOver ? options.OnMouseOver : this.OnMouseOver;
              var vMouseOut   = options.OnMouseOut ? options.OnMouseOut : this.OnMouseOut;
              var vMouseClick = options.OnMouseClick ? options.OnMouseClick : this.OnMouseClick;
          
              var shape;
              if(this.bFF)
              {
                  shape=this.svgDoc.createElementNS("http://www.w3.org/2000/svg","rect");
                  var cssText = "fill: " + vFill+";stroke:"+vStK+";stroke-width:"+vStKW+";";
                  
                  shape.id = vId;
                  shape.setAttribute("x", vX);
                  shape.setAttribute("y", vY);
                  shape.setAttribute("width",  vW);
                  shape.setAttribute("height", vH);
                  shape.setAttribute("style", cssText);
                 
                  //绑定事件
                  if(vMouseDown)  {shape.addEventListener("mousedown",function (evt){vMouseDown.fun(evt,vMouseDown.param)},false);}
                  if(vMouseUp)    {shape.addEventListener("mouseup",function (evt){vMouseUp.fun(evt,vMouseUp.param)},false);}
                  if(vMouseOver)  {shape.addEventListener("mouseover",function (evt){vMouseOver.fun(evt,vMouseOver.param)},false);}
                  if(vMouseOut)   {shape.addEventListener("mouseout",function (evt){vMouseOut.fun(evt,vMouseOut.param)},false);}
                  if(vMouseClick) {shape.addEventListener("click",function (evt){vMouseClick.fun(evt,vMouseClick.param)},false);}
              }
              else
              {
                  shape = document.createElement("v:rect");
                  shape.id  = vId;
                  shape.style.position   = "absolute";
                  
                  shape.fillcolor        = vFill;
                  shape.stroked          = vStKed;
                  shape.strokecolor      = vStK;
                  shape.strokeweight     = vStKW;
                  shape.style.zIndex     = vzIndex;
                  shape.backdepth        = vBackDepth;
                  
                  shape.style.left       = parseInt(vX) + "px";
                  shape.style.top        = parseInt(vY) + "px";
                  shape.style.width      = parseInt(vW) + "px";
                  shape.style.height     = parseInt(vH) + "px";
                  //shape.style.visibility = "visible";

                  
                    if(vMouseDown)  {shape.onmousedown = function (evt){vMouseDown.fun(evt,vMouseDown.param)};}
                    if(vMouseUp)    {shape.onmouseup   = function (evt){vMouseUp.fun(evt,vMouseUp.param)};}
                    if(vMouseOver)  {shape.onmouseover = function (evt){vMouseOver.fun(evt,vMouseOver.param)};}
                    if(vMouseOut)   {shape.onmouseout  = function (evt){vMouseOut.fun(evt,vMouseOut.param)};}
                    if(vMouseClick) {shape.onclick     = function (evt){vMouseClick.fun(evt,vMouseClick.param)};}
              }
              if(att)//用户自定义属性
              {
                   for(var i = 0; i < att.length; i++)
                   {
                        shape.setAttribute(att[i].name, att[i].val);
                   }
              }
              this.DrawPen.appendChild(shape)
          }
          
          
          
          //Image
          function drawImage_SVG()
          {
              var tmp = $A(arguments)
              var options = tmp.shift()
              
              var attop;                        //设置对象的属性信息  name:属性名称   val：属性值
              if(tmp.length > 0)
              {
                  attop = tmp.shift()
              }
              var vId         = options.id           ? options.id : "Img";
              var vX          = options.x            ? options.x : this.left;
              var vY          = options.y            ? options.y : this.top;
              var vW          = options.w            ? options.w : 20;
              var vH          = options.h            ? options.h : 20;
              var vhref       = options.href         ? options.href : "#";
              var vRation     = options.rotation     ? options.rotation : 1;
              var att         = (attop && attop.att) ? attop.att : null;
        
              
              var vzIndex     = options.zIndex       ? options.zIndex : this.zIndex;
              var vMouseDown  = options.OnMouseDown  ? options.OnMouseDown : this.OnMouseDown;
              var vMouseUp    = options.OnMouseUp    ? options.OnMouseUp : this.OnMouseUp;
              var vMouseOver  = options.OnMouseOver  ? options.OnMouseOver : this.OnMouseOver;
              var vMouseOut   = options.OnMouseOut   ? options.OnMouseOut : this.OnMouseOut;
              var vMouseClick = options.OnMouseClick ? options.OnMouseClick : this.OnMouseClick;
              
              var vRightClick = options.OnRightClick ? options.OnRightClick : this.OnRightClick;  //右键菜单
              
              var shape;
              /*if(this.bFF)
              {
                  shape=this.svgDoc.createElementNS("http://www.w3.org/2000/svg","image");
                  shape.id = vId;
                  shape.setAttribute("x", vX);
                  shape.setAttribute("y", vY);
                  shape.setAttribute("width",  vW);
                  shape.setAttribute("height", vH);
                  shape.setAttributeNS(
                     "http://www.w3.org/2000/xlink/namespace/",
                     "xlink:href",
                     vhref);
                   //绑定事件
                  if(vMouseDown) {shape.addEventListener("mousedown",vMouseDown,false);}
                  if(vMouseUp) {shape.addEventListener("mouseup",vMouseUp,false);}
                  if(vMouseOver) {shape.addEventListener("mouseover",vMouseOver,false);}
                  if(vMouseOut) {shape.addEventListener("mouseout",vMouseOut,false);}
                  if(vMouseClick) {shape.addEventListener("click",vMouseClick,false);}
              }
              else
              {*/
                  shape = document.createElement("v:image");
                  shape.id  = vId;
                  shape.src = vhref;
                  
                  shape.style.rotation   = vRation;
                  shape.style.position   = "absolute";
                  shape.style.zIndex     = vzIndex;
                  
                  shape.style.left       = parseInt(vX) + "px";
                  shape.style.top        = parseInt(vY) + "px";
                  shape.style.width      = parseInt(vW) + "px";
                  shape.style.height     = parseInt(vH) + "px";
                  //shape.style.visibility = "visible";
                  
                  if(vMouseDown) {shape.onmousedown = function (evt){vMouseDown.fun(evt,vMouseDown.param)};}
                  if(vMouseUp)   {shape.onmouseup = function (evt){vMouseUp.fun(evt,vMouseUp.param)};}
                  if(vMouseOver) {shape.onmouseover = function (evt){vMouseOver.fun(evt,vMouseOver.param)};}
                  if(vMouseOut)  {shape.onmouseout = function (evt){vMouseOut.fun(evt,vMouseOut.param)};}
                  if(vMouseClick){shape.onclick = function (evt){vMouseClick.fun(evt,vMouseClick.param)};}
                  if(vRightClick){shape.oncontextmenu = function (evt){vRightClick.fun(evt,vRightClick.param)};}
                  
              //}
              if(att)//用户自定义属性
              {
                   for(var i = 0; i < att.length; i++)
                   {
                        shape.setAttribute(att[i].name, att[i].val);
                   }
              }
              this.DrawPen.appendChild(shape)
          }
          
          //画线

          function drawLine_SVG()
          {
              var tmp = $A(arguments)
              var options = tmp.shift()
              var attop;                        //设置对象的属性信息  name:属性名称   val：属性值
              if(tmp.length > 0)
              {
                  attop = tmp.shift()
              }
              var att         = (attop && attop.att)      ? attop.att : null;
              
              var vId         = options.id                ? options.id : "Lin";
              var dotArr      = options.dotArr            ? options.dotArr : this.dotArr;
              var vzIndex     = options.zIndex            ? options.zIndex : this.zIndex;
              var bdash       = options.bdash             ? options.bdash  : false;
              
              var vStK        = options.strokecolor       ? options.strokecolor : this.strokecolor;
              var vStKW       = options.strokeweight      ? options.strokeweight : this.strokeweight;
              var vMouseDown  = options.OnMouseDown       ? options.OnMouseDown : this.OnMouseDown;
              var vMouseUp    = options.OnMouseUp         ? options.OnMouseUp : this.OnMouseUp;
              var vMouseOver  = options.OnMouseOver       ? options.OnMouseOver : this.OnMouseOver;
              var vMouseOut   = options.OnMouseOut        ? options.OnMouseOut : this.OnMouseOut;
              var vMouseClick = options.OnMouseClick      ? options.OnMouseClick : this.OnMouseClick;
              
              var vRightClick = options.OnRightClick      ? options.OnRightClick : this.OnRightClick;  //右键菜单
              
              if(dotArr.length != 2)
              {
                  alert("传入的坐标串不符合条件！");
                  return;
              }
              var shape;
              x1 = dotArr[0].lx
              y1 = dotArr[0].ly
              x2 = dotArr[1].lx
              y2 = dotArr[1].ly
              if(this.bFF)
              {
                 shape=this.svgDoc.createElementNS("http://www.w3.org/2000/svg","line");
                 var x1,x2,y1,y2;
             
                 shape.id = vId;
                 shape.setAttribute("x1", x1);
                 shape.setAttribute("y1", y1);
                 shape.setAttribute("x2", x2);
                 shape.setAttribute("y2", y2);
                 //shape.getStyle().setProperty("stroke", vStK);
                 //shape.getStyle().setProperty("stroke-width", vStKW);
                 var cssText = "stroke:"+vStK+";stroke-width:"+vStKW+";";
                 shape.setAttribute("style", cssText);
                 //绑定事件
                 if(vMouseDown)  {shape.addEventListener("mousedown",function (evt){vMouseDown.fun(evt,vMouseDown.param)},false);}
                 if(vMouseUp)    {shape.addEventListener("mouseup",  function (evt){vMouseUp.fun(evt,vMouseUp.param)},false);}
                 if(vMouseOver)  {shape.addEventListener("mouseover",function (evt){vMouseOver.fun(evt,vMouseOver.param)},false);}
                 if(vMouseOut)   {shape.addEventListener("mouseout", function (evt){vMouseOut.fun(evt,vMouseOut.param)},false);}
                 if(vMouseClick) {shape.addEventListener("click",    function (evt){vMouseClick.fun(evt,vMouseClick.param)},false);}
                 
              }
              else
              {
                 shape      = document.createElement("v:line");
                 shape.id   = vId;
        
                 shape.style.position   = "absolute";
                 shape.strokecolor      = vStK;
                 shape.strokeweight     = vStKW;
                 shape.style.zIndex     = vzIndex;
                 shape.style.left = parseInt(x1) + "px";
                 shape.style.top  = parseInt(y1) + "px";
                 shape.from = "0px,0px";
                 var offx = parseInt(x2) - parseInt(x1) + "px";
                 var offy = parseInt(y2) - parseInt(y1) + "px";
                 shape.to   = offx + "," + offy;
                 
                 if(bdash)
                 {
                      var dashline  = document.createElement("v:stroke");
                      dashline.setAttribute("dashstyle", "LongDash");
                      shape.appendChild(dashline) 
                 }
                 
                  if(vMouseDown) {shape.onmousedown = function (evt){vMouseDown.fun(evt,vMouseDown.param)};}
                  if(vMouseUp)   {shape.onmouseup = function (evt){vMouseUp.fun(evt,vMouseUp.param)};}
                  if(vMouseOver) {shape.onmouseover = function (evt){vMouseOver.fun(evt,vMouseOver.param)};}
                  if(vMouseOut)  {shape.onmouseout = function (evt){vMouseOut.fun(evt,vMouseOut.param)};}
                  if(vMouseClick){shape.onclick = function (evt){vMouseClick.fun(evt,vMouseClick.param)};}
                  if(vRightClick){shape.oncontextmenu = function (evt){vRightClick.fun(evt,vRightClick.param)};}
              }
               if(att)//用户自定义属性
               {
                   for(var i = 0; i < att.length; i++)
                   {
                        shape.setAttribute(att[i].name, att[i].val);
                   }
               }
              this.DrawPen.appendChild(shape) 
          }
          
          
          //画多边行
          
          function drawShape_SVG()
          {
              var tmp = $A(arguments)
              var options = tmp.shift()
              var attop;                        //设置对象的属性信息  name:属性名称   val：属性值
              if(tmp.length > 0)
              {
                  attop = tmp.shift()
              }
              var att         = (attop && attop.att) ? attop.att : null;
              
              var vId     = options.id ?           options.id : "Shape";
              var dotArr  = options.dotArr ?       options.dotArr : this.dotArr;
              var vzIndex     = options.zIndex?        options.zIndex : this.zIndex;
              var vfilled      = options.filled?       true: false; 
              var vFill   = options.fill ?         options.fill : this.fill;
              var vStK    = options.strokecolor ?       options.strokecolor : this.strokecolor;
              var vStKW   = options.strokeweight ? options.strokeweight : this.strokeweight;
              var vMouseDown = options.OnMouseDown ? options.OnMouseDown : this.OnMouseDown;
              var vMouseUp = options.OnMouseUp ? options.OnMouseUp : this.OnMouseUp;
              var vMouseOver = options.OnMouseOver ? options.OnMouseOver : this.OnMouseOver;
              var vMouseOut = options.OnMouseOut ? options.OnMouseOut : this.OnMouseOut;
              var vMouseClick = options.OnMouseClick ? options.OnMouseClick : this.OnMouseClick;
              
              if(dotArr.length < 2)
              {
                 alert("传入的坐标串不符合条件！");
                 return;
              }
              var shape;
              if(this.bFF)
              {
                  shape=this.svgDoc.createElementNS("http://www.w3.org/2000/svg","path");
                  var cssText = "fill: " + vFill + ";stroke:"+vStK+";stroke-width:"+vStKW+";";;
                   var vPath = "M ";
                   
                   for(var i = 0; i < dotArr.length; i++)
                   {
                       vPath += dotArr[i].lx + " " + dotArr[i].ly
                       if(i < dotArr.length - 1)
                       {
                          vPath += " L "
                       }
                   }
                   
                   shape.id = vId;
                   shape.setAttribute("d", vPath);
                   
                   //shape.getStyle().setProperty("stroke", vStK);
                   //shape.getStyle().setProperty("stroke-width", vStKW);
                  
                   shape.setAttribute("style", cssText);
                    //绑定事件
                 if(vMouseDown)  {shape.addEventListener("mousedown",function (evt){vMouseDown.fun(evt,vMouseDown.param)},false);}
                 if(vMouseUp)    {shape.addEventListener("mouseup",  function (evt){vMouseUp.fun(evt,vMouseUp.param)},false);}
                 if(vMouseOver)  {shape.addEventListener("mouseover",function (evt){vMouseOver.fun(evt,vMouseOver.param)},false);}
                 if(vMouseOut)   {shape.addEventListener("mouseout", function (evt){vMouseOut.fun(evt,vMouseOut.param)},false);}
                 if(vMouseClick) {shape.addEventListener("click",    function (evt){vMouseClick.fun(evt,vMouseClick.param)},false);}
               }
               else
               {
                    shape = document.createElement("v:shape");
                    shape.id  = vId;
                    shape.style.position   = "absolute";
                    shape.coordsize        = "50,50";
                    shape.filled           = vfilled;
                    shape.fillcolor        = vFill;
                    shape.strokecolor      = vStK;
                    shape.strokeweight     = vStKW;
                    shape.style.width      = "50px";
                    shape.style.height     = "50px";
                    shape.style.zIndex     = vzIndex;
                    shape.style.left = dotArr[0].lx + "px";
                    shape.style.top  = dotArr[0].ly + "px";
                    var vmlPath = "m " + 0 + "," + 0 + " l ";
                    for(var i=1; i<dotArr.length; i++)
                    {
                        vmlPath += (dotArr[i].lx - dotArr[0].lx) + "," + (dotArr[i].ly - dotArr[0].ly) + " ";
                    }
                    vmlPath += "e";
                    shape.path = vmlPath;
                
                    //shape.style.visibility = "visible";
                    if(vMouseDown)  {shape.onmousedown = function (evt){vMouseDown.fun(evt,vMouseDown.param)};}
                    if(vMouseUp)    {shape.onmouseup   = function (evt){vMouseUp.fun(evt,vMouseUp.param)};}
                    if(vMouseOver)  {shape.onmouseover = function (evt){vMouseOver.fun(evt,vMouseOver.param)};}
                    if(vMouseOut)   {shape.onmouseout  = function (evt){vMouseOut.fun(evt,vMouseOut.param)};}
                    if(vMouseClick) {shape.onclick     = function (evt){vMouseClick.fun(evt,vMouseClick.param)};}
               }
                              
               if(att)//用户自定义属性
               {
                   for(var i = 0; i < att.length; i++)
                   {
                        shape.setAttribute(att[i].name, att[i].val);
                   }
               }
               this.DrawPen.appendChild(shape) 
          }
          
           
          function drawText_SVG()
          {
              var tmp = $A(arguments)
              var options = tmp.shift()
              
               var attop;                        //设置对象的属性信息  name:属性名称   val：属性值
              if(tmp.length > 0)
              {
                  attop = tmp.shift()
              }
              var att         = (attop && attop.att) ? attop.att : null;
              
              var vId     = options.id ?           options.id : "Text";
              var vX      = options.x  ?           options.x : this.left;
              var vY      = options.y  ?           options.y : this.top;
              var vText   = options.text  ?        options.text : "";
              var vzIndex     = options.zIndex?        options.zIndex : this.zIndex;
              var link    = options.link  ?        options.link : false;
              var bsvgText= options.bsvg  ?        options.bsvg : false;
              
              var vMouseDown = options.OnMouseDown ? options.OnMouseDown : this.OnMouseDown;
              var vMouseUp = options.OnMouseUp ? options.OnMouseUp : this.OnMouseUp;
              var vMouseOver = options.OnMouseOver ? options.OnMouseOver : this.OnMouseOver;
              var vMouseOut = options.OnMouseOut ? options.OnMouseOut : this.OnMouseOut;
               var vMouseClick = options.OnMouseClick ? options.OnMouseClick : this.OnMouseClick;
              
              var shape;
              if(this.bFF)
              {
                  shape=this.svgDoc.createElementNS("http://www.w3.org/2000/svg","text");
                  
                  shape.setAttribute("x", parseInt(vX) + "px");
                  shape.setAttribute("y", parseInt(vY) + 8 + "px");
                  
                  shape.id = vId;
                  shape.appendChild(this.svgDoc.createTextNode(vText));
                  if(link)
                  {
                     var a=this.svgDoc.createElementNS("http://www.w3.org/2000/svg","a");
                     a.setAttributeNS(
                     "http://www.w3.org/2000/xlink/namespace/",
                     "xlink:href",
                     link);
                     //将text节点添加到链接节点中
                     a.appendChild(shape);
     
                     //将链接节点添加到g5节点中

                     this.DrawPen.appendChild(a); 
                  }
                  else
                  {
                     this.DrawPen.appendChild(shape)
                  }
                   //绑定事件
                 if(vMouseDown)  {shape.addEventListener("mousedown",function (evt){vMouseDown.fun(evt,vMouseDown.param)},false);}
                 if(vMouseUp)    {shape.addEventListener("mouseup",  function (evt){vMouseUp.fun(evt,vMouseUp.param)},false);}
                 if(vMouseOver)  {shape.addEventListener("mouseover",function (evt){vMouseOver.fun(evt,vMouseOver.param)},false);}
                 if(vMouseOut)   {shape.addEventListener("mouseout", function (evt){vMouseOut.fun(evt,vMouseOut.param)},false);}
                 if(vMouseClick) {shape.addEventListener("click",    function (evt){vMouseClick.fun(evt,vMouseClick.param)},false);}
               }
               else
               {
                  shape = document.createElement("span");
                  shape.id  = vId;
                  
                  shape.style.position   = "absolute";
                  shape.style.zIndex     = vzIndex;
                  
                  
                  shape.style.left       = parseInt(vX) + "px";
                  shape.style.top        = parseInt(vY) + "px";
                  
                  //shape.style.visibility = "visible";
                  
                  shape.innerHTML = vText;
                  
                    if(vMouseDown)  {shape.onmousedown = function (evt){vMouseDown.fun(evt,vMouseDown.param)};}
                    if(vMouseUp)    {shape.onmouseup   = function (evt){vMouseUp.fun(evt,vMouseUp.param)};}
                    if(vMouseOver)  {shape.onmouseover = function (evt){vMouseOver.fun(evt,vMouseOver.param)};}
                    if(vMouseOut)   {shape.onmouseout  = function (evt){vMouseOut.fun(evt,vMouseOut.param)};}
                    if(vMouseClick) {shape.onclick     = function (evt){vMouseClick.fun(evt,vMouseClick.param)};}
                  this.DrawPen.appendChild(shape)
                  
                  //document.getElementsByTagName('BODY')[0].appendChild(shape)
               }
                if(att)//用户自定义属性
               {
                   for(var i = 0; i < att.length; i++)
                   {
                        shape.setAttribute(att[i].name, att[i].val);
                   }
               }
          }
          
          function moveObj_SVG(id,dx,dy)
          
          {
              if(!id)
              {
                  return
              }
              
              
              if(this.bFF)
              {
                  var obj = id.id ? id : this.svgDoc.getElementById(id);
                  switch(obj.tagName)
                  {
                      case "circle":
                           obj.setAttribute("cx", parseInt(getObjAtt(obj,"cx")) + dx + "px");
                           obj.setAttribute("cy", parseInt(getObjAtt(obj,"cy")) + dy + "px");
                           
                           break;
                      case "rect":
                           obj.setAttribute("x", parseInt(getObjAtt(obj,"x")) + dx + "px");
                           obj.setAttribute("y", parseInt(getObjAtt(obj,"y")) + dy + "px");
                           
                         break;
                      case "line":
                           obj.setAttribute("x1", parseInt(getObjAtt(obj,"x1")) + dx + "px");
                           obj.setAttribute("y1", parseInt(getObjAtt(obj,"y1")) + dy + "px");
                           obj.setAttribute("x2",  parseInt(getObjAtt(obj,"x2")) + dx + "px");
                           obj.setAttribute("y2",  parseInt(getObjAtt(obj,"y2")) + dy + "px");
                         break;
                      case "text":
                           obj.setAttribute("x", parseInt(getObjAtt(obj,"x")) + dx + "px");
                           obj.setAttribute("y", parseInt(getObjAtt(obj,"y")) + dy + "px");
                         break;    
                  }
              }
              else
              {
                  var obj = id.id ? id : $(id);
                  if(obj)
                  {
                     obj.style.left = parseInt(obj.style.left) + dx + "px";
                     obj.style.top = parseInt(obj.style.top) + dy + "px";
                  }
              }
              
          }
          
          function getObjById_SVG(id)
          {
               if(this.bFF)
              
              {
                 obj = this.svgDoc.getElementById(id);
              }
              else
              {
                 obj = $(id);
              }
              return obj;
          }
         
          function getObjAtt_SVG(id,attname)
          {
              if(!id)
              {
                  return
              }
              var resVal = "";
              var obj = null;
              if(this.bFF)
              
              {
                 obj = id.id ? id : this.svgDoc.getElementById(id);
              }
              else
              {
                 obj = id.id ? id : $(id);
              }
              if(obj)
              {
                  for(var i = 0; i < obj.attributes.length; i++)
                  {
                        if(obj.attributes.item(i).nodeName == attname)
                        {
                            resVal = obj.attributes.item(i).nodeValue
                            break;
                        }
                  }
              }
              return resVal;
          }